<template>
	<view>
		<!-- 地址 -->
		<view class="address-section">
			<view class="order-content">
                <uv-icon size="22" name="map"></uv-icon>
				<view class="cen">
					<view class="top">
						<text class="name">{{addressData.realName}}</text>
						<text class="mobile">{{addressData.mobile}}</text>
					</view>
					<text class="address">{{addressData.provincename}} {{addressData.cityname}} {{addressData.countyname}} {{addressData.address}}</text>
				</view>
			</view>
		</view>

		<view class="goods-section">
			<view class="g-item" v-for="(sku,index) in skus" :key="index">
				<image :src="uniConfig.ssoPath + sku.logo"></image>
				<view class="right">
					<text class="title clamp">{{ sku.productName }}</text>
					<view class="spec">{{ sku.skuName }}</view>
					<view class="price-box">
						<text class="price">￥{{ sku.sellPrice }}</text>
						<text class="number">x {{ sku.qty }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 优惠明细 -->
		<view class="yt-list">
			<view class="yt-list-cell coupon-cell" @click="changePay(orderAvailableCoupon,'zeroPay')">
				<image src="../../static/coupon.svg" mode="widthFix" style="width:32px;margin-right:12px;"/>
				<text class="cell-tit clamp">兑换券</text>
                
                <text  v-if="useCouponArr.length > 0 && payWay != 'zeroPay' && orderAvailableCoupon.length > 0" class="cell-tip disabled">无法使用（储值卡使用中）</text>
                <template v-else-if="orderAvailableCoupon.length > 0">
                    <text class="available-coupon bg-line-color" v-if="useCouponArr.length > 0">已选{{useCouponArr.length}}张兑换券</text>
                    <text class="available-coupon bg-line-color" v-else>{{orderAvailableCoupon.length}}张可用</text>
                    <uv-icon size="17" name="arrow-right"></uv-icon>
                </template>
                <text class="cell-tip disabled" v-else>暂无可用</text>
			</view>
			<!-- <view class="yt-list-cell coupon-cell" @click="changePay(vipCoupon,'vipPay')">
				<image src="../../static/card.svg" mode="widthFix" style="width:32px;margin-right: 12px;"/>
                <text class="cell-tit clamp">储值卡</text>
                <text v-if="useCouponArr.length > 0 && payWay != 'vipPay' && vipCoupon.length > 0" class="cell-tip disabled">无法使用（礼包卡始终中）</text>
                <template v-else-if="vipCoupon.length > 0">
                    <text class="available-coupon bg-line-color">{{vipCoupon.length}}张可用</text>
                    <uv-icon size="17" name="arrow-right"></uv-icon>
                </template>
                <text v-else class="cell-tip disabled">暂无可用</text>
			</view> -->
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">总金额</text>
				<text class="cell-tip">￥{{ orderInfo.orderTotalAmount }}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">优惠金额</text>
				<text class="cell-tip red">-￥{{ orderInfo.discount }}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">￥{{ orderInfo.expressFee }}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">备注</text>
                <text class="cell-tip" v-if="skus.length > 0">{{ skus[0].memberRemark }}</text>
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				<text class="price">{{ orderInfo.amount }}</text>
			</view>
			<text class="submit bg-line-color" @click="submit">确认支付</text>
		</view>
		
		
        <uv-popup ref="popupRef" round="12" mode="bottom" 
            custom-style="height: 62vh;" 
            bgColor="#f5f5f5" 
            :closeable="true"
            @change="toggleMask"
            closeIconPos="top-right">
			<Coupon :coupons="couponList" :order="orderInfo" :unusedCouponList="unusedCouponList" @useCouponed="pageLoadData" v-if="isCoupon"/>
		</uv-popup>
	</view>
</template>

<script setup lang="ts">
const app = getApp()
import { ref , computed , getCurrentInstance} from 'vue'
import Coupon from "@/components/coupons"
import { getOrder , setPaymethod} from "@/api/order"
import { queryCouponByOrder } from "@/api/coupon"
import { useUCenterStore } from '@/stores/uCenter'
const store = useUCenterStore()
const member = computed(() => {
  return store.memberInfo
})
import { onLoad } from "@dcloudio/uni-app"
import { uniConfig } from '@/config/index'
const orderInfo = ref<any>({})
const popupRef = ref()
const isCoupon = ref<any>(false)
const toggleMask = (e : any) => {
    isCoupon.value = e.show
}
const addressData = ref<any>({})
const skus = ref<any>([])
const submit = () => {
    uni.showLoading()
    setPaymethod({
        paymethod:orderInfo.value.amount > 0?'wxminiPay':payWay.value,
        tradeno:tradeno.value,
        openid:member.value.openid
    }).then(payInfo => {
        uni.hideLoading()
        if(payInfo.success){
            const info = payInfo.data
            if(info){
                uni.requestPayment({
                    "provider": "wxpay",
                    ...info,
                    success(res) {
                        uni.redirectTo({url:'/pages/mall/paySuccess'})
                    },
                    fail(e) {
                        uni.showToast({title:payInfo.msg,icon:'none'})
                    }
                })
            }else{
                uni.redirectTo({url:'/pages/mall/paySuccess'})
            }
        }else{
            uni.showToast({title:payInfo.msg,icon:'none'})
        }
    }).catch(res => {
        uni.showLoading()
    })
}
const couponList = ref<any>([]) //选择礼包卡或者储值卡支付时，需要项组件提交的数据
const tradeno = ref<any>() 
const payWay = ref<any>('wxminiPay') //支付方式
const vipCoupon = ref<any>([]) //储值卡
const useCouponArr = ref<any>([]) //已使用的卡
const orderAvailableCoupon = ref<any>([]) //礼包卡
const unusedCouponList = ref<any>([])
const getOrderCoupon = () => {
    queryCouponByOrder({ tradeno: tradeno.value }).then((res) => {
        orderAvailableCoupon.value = []//礼包卡
        vipCoupon.value = []//储值卡
        couponList.value = []
        useCouponArr.value = []//缓存已经选择使用的卡
        res.data && res.data.couponList.forEach(item => {
            if(item.type == "LB"){
                orderAvailableCoupon.value.push(item)
            }else if(item.type == "VIP"){
                vipCoupon.value.push(item)
            }
            if(item.isUse){
                useCouponArr.value.push(item)
                payWay.value = (item.type == "LB"?'zeroPay':'vipPay')
            }
        })
        unusedCouponList.value = res.data.unusedCouponList
        initCoupons()
    })
}
const initCoupons = () => {
    couponList.value = []
    if(payWay.value == "zeroPay")couponList.value = orderAvailableCoupon.value
    if(payWay.value == "vipPay")couponList.value = vipCoupon.value
    console.info('couponList.value',couponList.value)
}
const changePay = (arr : any,way : any) => {
    const text = way == 'zeroPay'?'礼包卡':'储值卡'
    if(arr.length == 0 && unusedCouponList.value.length == 0){
        uni.showToast({title:`暂无${text}可用`,icon:'none'})
        return
    }
    if(useCouponArr.value.length > 0 && payWay.value != way){
        uni.showToast({title:`礼包卡与储值卡不能同时使用`,icon:'none'})
        return
    }
    payWay.value = way
    couponList.value = arr
    popupRef.value.open()
}

const pageLoadData = () => {
    getOrder({tradeno:tradeno.value}).then(res => {
        orderInfo.value = res.data
        if(res.data.amount == 0)popupRef.value.close()
        addressData.value = res.data.memberAddress
        skus.value = res.data.buyItemlist
    })
    getOrderCoupon()
}

onLoad(async (options : any) => {
    const { proxy } = getCurrentInstance();
    await proxy.$onLaunched;
    tradeno.value = options.tradeno
    pageLoadData()
})
</script>

<style lang="scss">
page {
    background: $page-color-base;
    padding-bottom: 100upx;
}

.address-section {
    padding: 30upx 0;
    background: #fff;
    position: relative;

    .order-content {
        display: flex;
        align-items: center;
        padding:32upx;
    }

    .cen {
        display: flex;
        flex-direction: column;
        flex: 1;
        font-size: 28upx;
        color: $font-color-dark;
        padding-left:12upx;
    }

    .name {
        font-size: 34upx;
        margin-right: 24upx;
    }

    .address {
        margin-top: 6upx;
        margin-right: 20upx;
        color: $font-color-light;
    }

    .a-bg {
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 100%;
        height: 5upx;
    }
}

.goods-section {
    margin-top: 16upx;
    background: #fff;
    padding-bottom: 1px;

    .g-header {
        display: flex;
        align-items: center;
        height: 84upx;
        padding: 0 30upx;
        position: relative;
    }

    .logo {
        display: block;
        width: 50upx;
        height: 50upx;
        border-radius: 100px;
    }

    .name {
        font-size: 30upx;
        color: $font-color-base;
        margin-left: 24upx;
    }

    .g-item {
        display: flex;
        margin: 22upx 32upx;
        padding: 32upx 0;
        border-bottom:1px solid #f5f5f5;
        &:last-child{
            border:0px;
        }
        image {
            flex-shrink: 0;
            display: block;
            width: 140upx;
            height: 140upx;
            border-radius: 4upx;
        }

        .right {
            flex: 1;
            padding-left: 24upx;
            overflow: hidden;
        }

        .title {
            font-size: 32upx;
            color: $font-color-dark;
            font-weight: 600;
        }

        .spec {
            font-size: 26upx;
            color: $font-color-light;
        }

        .price-box {
            display: flex;
            align-items: center;
            font-size: 32upx;
            color: $base-color;
            padding-top: 10upx;

            .price {
                margin-bottom: 4upx;
            }
            .number{
                font-size: 26upx;
                color: $font-color-base;
                margin-left: 20upx;
            }
        }

        .step-box {
            position: relative;
        }
    }
}
.yt-list {
    background: #fff;
    margin:22upx;
    border-radius: 9px;
    font-size: $font-base;
}

.yt-list-cell {
    display: flex;
    align-items: center;
    padding: 10upx 30upx 10upx 40upx;
    line-height: 70upx;
    position: relative;

    &.cell-hover {
        background: #fafafa;
    }

    &.b-b:after {
        left: 30upx;
    }

    .cell-icon {
        text-align: center;
        border-radius: 4upx;
        margin-right: 12upx;
    }

    .cell-more {
        align-self: center;
        font-size: 24upx;
        color: $font-color-light;
        margin-left: 8upx;
        margin-right: -10upx;
    }

    .cell-tit {
        flex: 1;
        color: $font-color-dark;
        margin-right: 10upx;
        font-weight: 600;
    }

    .cell-tip {
        font-size: 26upx;
        color: $font-color-dark;
        
        &.disabled {
            color: $font-color-light;
        }

        &.active {
            color: $base-color;
        }
        &.red{
            color: $base-color;
        }
    }

    &.desc-cell {
        .cell-tit {
            max-width: 90upx;
        }
    }

    .desc {
        flex: 1;
        font-size: $font-base;
        color: $font-color-dark;
    }
}
.coupon-cell{
    padding:32upx 32upx 32upx 40upx;
    position: relative;
    &::after{
        position: absolute;
        content: "";
        width: 90%;
        height: 1px;
        background-color: rgba(0, 0, 0, 0.05);
        right: 5%;
        bottom: 0;
    }
    &:last-child::after{height:0;}
    .available-coupon {
        border-radius: 32px;
        background: linear-gradient(to right, #ff9565, #fb2c4c);
        color: #fff;
        padding: 6upx 22upx;
        font-size: $font-base;
        height: 32upx;
        line-height: 32upx;
    }
}
/* 支付列表 */
.pay-list{
    padding-left: 40upx;
    margin-top: 16upx;
    background: #fff;
    .pay-item{
        display: flex;
        align-items: center;
        padding-right: 20upx;
        line-height: 1;
        height: 110upx;	
        position: relative;
    }
    .icon-weixinzhifu{
        width: 80upx;
        font-size: 40upx;
        color: #6BCC03;
    }
    .icon-alipay{
        width: 80upx;
        font-size: 40upx;
        color: #06B4FD;
    }
    .icon-xuanzhong2{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60upx;
        height: 60upx;
        font-size: 40upx;
        color: $base-color;
    }
    .tit{
        font-size: 32upx;
        color: $font-color-dark;
        flex: 1;
    }
}

.footer{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 995;
    display: flex;
    align-items: center;
    width: 100%;
    height: 90upx;
    justify-content: space-between;
    font-size: 30upx;
    background-color: #fff;
    z-index: 998;
    color: $font-color-base;
    box-shadow: 0 -1px 5px rgba(0,0,0,.1);
    .price-content{
        padding-left: 30upx;
    }
    .price-tip{
        color: $base-color;
        margin-left: 8upx;
    }
    .price{
        font-size: 36upx;
        color: $base-color;
    }
    .submit{
        display:flex;
        align-items:center;
        justify-content: center;
        width: 280upx;
        height: 100%;
        color: #fff;
        font-size: 32upx;
        background-color: $base-color;
    }
}

/* 优惠券面板 */
.mask{
    display: flex;
    align-items: flex-end;
    position: fixed;
    left: 0;
    top: var(--window-top);
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0);
    z-index: 9995;
    transition: .3s;
    
    .mask-content{
        width: 100%;
        min-height: 30vh;
        max-height: 70vh;
        background: #f3f3f3;
        transform: translateY(100%);
        transition: .3s;
        overflow-y:scroll;
    }
    &.none{
        display: none;
    }
    &.show{
        background: rgba(0,0,0,.4);
        
        .mask-content{
            transform: translateY(0);
        }
    }
}

</style>
